

<template>
	<view class="s-back subscribe">
        <view class="flex" style="align-items: center;">
			<view class="text1">
				<uni-icons type="back" size="25" @click="goBack" color="#fff"></uni-icons>
			
			</view>
			<view class="flex1">注册</view>
			<view class="right" style="color:transparent">恢复订阅</view>		
        </view>

		<view class="inp1" style="margin-top:120rpx">

			<input class="inpt" placeholder="手机号" 
							confirm-type="send" style="font-size: 30rpx;" 
							cursor-spacing="40"
							  
							ref="inputRef" v-model="mobile" :adjust-position="false"/> 
							
						</view>
						<view class="inp1 code" v-if="isSms==1">
						<input class="inpt" placeholder="请填写图形验证码" 
							confirm-type="send" style="font-size: 30rpx;width:calc(100% - 200rpx)" 
							cursor-spacing="40"
							  
							ref="inputRef" v-model="captcha" :adjust-position="false"/> 
							
						<xz-code class="box"
        ref="myCanvas"
        :xzWidth="width"
        :xzHeight="height"
        :xzCount="count"
        @result="result" ></xz-code>
		</view>
						<view class="inp1" v-if="isSms==1">
						<input class="inpt" placeholder="请填写短信验证码" 
							confirm-type="send" style="font-size: 30rpx;width:calc(100% - 260rpx)" 
							cursor-spacing="40"
							  
							ref="inputRef" v-model="code" :adjust-position="false"/> 
							<text v-if="!codeLoading" @click="sendCode" class="text2">发送验证码</text>
							<text  class="text2" v-else>{{ timeInt }}秒后可重新发送</text>
						</view>

						<view class="inp1">

						<input class="inpt" placeholder="请设置密码" 
							confirm-type="send" style="font-size: 30rpx;width: 100%;" 
							cursor-spacing="40"
							:password="!showPassword"
							ref="inputRef" v-model="password" :adjust-position="false"/> 
							

							<uni-icons v-if="showPassword" style="margin-left: 14px;" type="eye" size="20" @click="showPassword=false" color="#999"></uni-icons>

							<uni-icons v-else style="margin-left: 14px;" type="eye-slash" size="20" @click="showPassword=true" color="#999"></uni-icons>

	

						</view>
		<view class="btn" @click="login">注册</view>

		<view @click="jumpLogin" class="left">
				去登录
		</view>
	
	</view>
</template>

<script>
let s
import {debounce} from '@/utils'
import {isPhoneNumber} from '@/utils'
import XzCode from "@/components/xz-code/xz-code";
	export default {
		name:"subscribe",
    components:{
		XzCode
	},
		data() {
			return {
				timer:null,
				
				timeInt:60,
				codeLoading:false,
				showPassword:false,
				isSms:'',
				mobile:'',
				captcha:'',
				code:'',
				password:'',
				width: 100,
                height: 38,
                count: 4,
				val:''
				
            }
		},
		onLoad() {
				s = this
				s.isSms = uni.getStorageSync('sms')
		},
		mounted() {
			
		},
		beforeDestroy() {
			clearInterval(this.timer)
			this.timer = null
			
		},
		
		computed:{
			
		},
		methods: {
			result(event) {
                console.log('myCanvas', event.detail.text);
				s.val = event.detail.text

            },
			goBack(){
				uni.navigateBack({
					 delta: 1
				});
			},
			sendCode(){
					debounce(()=>{
					s.sendCode1()
				})
			},
			
			async sendCode1(){
				if(!isPhoneNumber(s.mobile)){
					this.$u.toast('请输入正确的手机号');
					return;
				}
				if(s.captcha.toLowerCase() == s.val.toLowerCase()){
					if(this.mobile){
						this.timeInt = 60
						this.codeLoading = true
						this.timer = setInterval(()=>{
							
							if(this.timeInt!=0){
								this.timeInt--
							}else{
								this.codeLoading = false
								clearInterval(this.timer)
								this.timer = null
							}
						},1000)
						const r = await this.$u.api.userSendCode({
							mobile:this.mobile
						})
						if(r){
							console.log(r)
						}
					}else{
						this.$u.toast('请输入正确的手机号');
					}
					
				}else{
					this.$u.toast('请输入正确的验证码');
				}
				
			},
			jumpLogin(){
				uni.navigateTo({
							url:'/pages/login/login'
						})
			},
			async login(){
				if(!isPhoneNumber(s.mobile)){
					this.$u.toast('请输入正确的手机号');
					return;
				}
				let inviteId = uni.getStorageSync('inviteId')
                uni.setStorageSync('inviteId','')
				const r = await s.$u.api.userRegiser({
					mobile:s.mobile,
					password:s.password,
					code:this.code,
					parent:inviteId
				})
				if(r){
					s.$u.toast('注册成功');
					setTimeout(()=>{
						uni.navigateTo({
							url:'/pages/login/login'
						})
					},2000)
					
				}
				
			}
		}
	}
</script>

<style lang="scss" scoped>
.subscribe{
	.flex{
		padding:24rpx;
		display: flex;
		color: #fff;
	}
	.text1{
		width: 130rpx;
	}
	.text2{
		color: #c3c3c3;
		padding-right: 10rpx;
	width:  260rpx;
    display: flex;
    justify-content: flex-end;
	}
	.flex1{
		display: flex;
		justify-content: center;
		flex: 1;
		font-size: 36rpx;
	}
	.right{
		color: #828694;
		font-size: 32rpx;
	}

	
	.inp1{
			
			padding: 16rpx 20rpx;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			flex-direction: row;
			margin:40rpx;
			border-radius: 60rpx;
			border: 1px solid #78A4A1;

			.inpt{
				margin-left: 20rpx;
				color: #fff;
			}
		}
		.code{
		padding: 0px 0rpx 0rpx 20rpx;
		border-right: none;border-top-right-radius: 0px;
		border-bottom-right-radius: 0px;
	}
		.btn{

			border-radius: 50rpx;
			background-image: linear-gradient(to top, #7CD887,#75CCD1);
			padding:26rpx 40rpx;
			color:#000;
			font-size: 30rpx;
			font-weight: 500;
			text-align: center;
			margin:40rpx;
		}
		.left{
			margin:40rpx 60rpx;
			color: #797979;
		}
		.text1{
			color: #78A4A1;
			white-space: nowrap;
		}
	
	
}
@media screen and (min-width: 700px) {
	.btn{
		width: 660px;
	}
	
	
}
</style>
